<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SVG BackgroundColor</title>
    <script src="./lib/config.js"></script>
    <script src="../dist/zrender.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        .opt-bar {
            position: absolute;
            top: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
    <div id="main" style="width:100vw;height:100vh;"></div>
    <div class="opt-bar">
        <button onclick="updateBg()">Change Background</button>
        <select id="repeat">
            <option value="">repeat</option>
            <option value="repeat-x">repeat-x</option>
            <option value="repeat-y">repeat-y</option>
            <option value="no-repeat">no-repeat</option>
        </select>
    </div>
    <script type="text/javascript">
    var zr = zrender.init(document.getElementById('main'), {
        renderer: 'svg'
    });

    var txt = new zrender.Text({
        x: 100,
        y: 100,
        style: {
            text: '',
            fill: '#fff',
            stroke: '#000',
            lineWidth: 2,
            fontSize: '2rem'
        }
    });
    zr.add(txt);

    var linearGradient = new zrender.LinearGradient();
    linearGradient.addColorStop(0, '#a598e1');
    linearGradient.addColorStop(1, '#14c4ba');

    var radialGradient = new zrender.RadialGradient();
    radialGradient.addColorStop(0, '#a598e1');
    radialGradient.addColorStop(1, '#14c4ba');

    var imageDom = document.createElement('img');
    // imageDom.src = `https://picsum.photos/seed/picsum/${zr.getWidth()}/${zr.getHeight()}`
    imageDom.src = `https://picsum.photos/seed/picsum/400/200`
    var pattern = {
        image: imageDom,
        // repeat: 'repeat-x'
        // repeat: 'repeat-y'
        // repeat: 'no-repeat'
    };

    const repeatSelector = document.querySelector('#repeat');
    repeatSelector.addEventListener('change', e => {
        if (bg.image) {
            bg.repeat = e.target.value;
            zr.setBackgroundColor(bg);
        }
    });

    var i = 0;
    var bg;

    function updateBg() {
        var text;
        var mod = i % 5;
        repeatSelector.style.display = 'none';
        if (mod === 0) {
            text = 'pattern';
            bg = pattern;
            repeatSelector.style.display = '';
        }
        else if (mod === 1) {
            text = 'radial gradient';
            bg = radialGradient;
        }
        else if (mod === 2) {
            text = 'linear gradient';
            bg = linearGradient;
        }
        else if (mod === 3) {
            bg = text = '#a598e1';
        }
        else {
            bg = text = 'none';
        }
        zr.setBackgroundColor(bg);
        txt.setStyle({ text: 'SVG BackgroundColor: ' + text });
        i++;
    }

    updateBg();

    window.addEventListener('resize', function() {
        zr.resize();
        // zr.setBackgroundColor(pattern);
    });
    </script>

</body>
</html>